<template>
  <view class="body">
    <view v-if="shoppingCarList[0].goods_id" class="goods_list">
      <!-- <GoodsListItem
        :goods="goods"
        v-for="goods in shoppingCarList"
        :key="goods.goods_id"
      >
        <template slot="left">
          <radio
            @tap.stop="checkSimpleRadio(goods.goods_id)"
            color="#eb4450"
            :checked="goods.goods_selected"
            class="GoodsListItem_left"
          />
        </template>
        <template slot="right" class="GoodsListItem_right">
          <view
            class="iconfont iconmainongji-copy btn_sub"
            @tap.stop="subCount(goods.goods_id)"
          ></view>
          <text class="count">{{ goods.goods_count }}</text>
          <view
            class="iconfont iconadd_m btn_add"
            @tap.stop="addCount(goods.goods_id)"
          ></view>
        </template>
      </GoodsListItem> -->
      <u-swipe-action
        :index="index"
        v-for="(goods, index) in shoppingCarList"
        :key="goods.goods_id"
        :options="options"
        bg-color="#f8f8f8"
        btn-width="140"
        vibrate-short
        @click="slide"
      >
        <GoodsListItem
          :goods="goods"
        >
          <template slot="left">
            <radio
              @tap.stop="checkSimpleRadio(goods.goods_id)"
              color="#eb4450"
              :checked="goods.goods_selected"
              class="GoodsListItem_left"
            />
          </template>
          <template slot="right" class="GoodsListItem_right">
            <view
              class="iconfont iconmainongji-copy btn_sub"
              @tap.stop="subCount(goods.goods_id)"
            ></view>
            <text class="count">{{ goods.goods_count }}</text>
            <view
              class="iconfont iconadd_m btn_add"
              @tap.stop="addCount(goods.goods_id)"
            ></view>
          </template>
        </GoodsListItem>
      </u-swipe-action>
    </view>
    <view class="empty_box"></view>
    <view class="acount" v-if="shoppingCarList.length > 0">
      <radio
        class="acount_radio"
        :checked="isAll"
        @tap="checkAllRadio"
        color="#eb4450"
      />
      <text class="radio_text">全选</text>
      <text class="total_text">合计:</text>
      <text class="total price">{{ totalMoney }}</text>
      <navigator url="/pages/pay/main" class="to_buy" hover-class="none">
        <view class="to_buy_btn" v-if="totalAmount"
          >去结算({{ totalAmount }})</view
        >
      </navigator>
    </view>
    <view v-if="shoppingCarList.length === 0" class="goodslist_empty">
      <image class="empty_image" src="/static/cart_empty.gif" mode="" />
      <text class="empty_text"> 空空如也~ </text>
      <navigator
        url="/pages/index/main"
        open-type="switchTab"
        hover-class="none"
      >
        <view class="btn">去逛逛</view>
      </navigator>
    </view>
  </view>
</template>

<script>
import GoodsListItem from "@/components/GoodsListItem";
export default {
  components: {
    GoodsListItem,
  },
  data() {
    return {
      shoppingCarList: [{}],
      options: [
        {
          text: "收藏",
          style: {
            backgroundColor: "#f8a15d",
          },
        },
        {
          text: "删除",
          style: {
            backgroundColor: "#f95553",
          },
        },
      ],
    };
  },
  onShow() {
    this.shoppingCarList = uni.getStorageSync("shoppingCarList") || [];
  },
  watch: {
    shoppingCarList: {
      deep: true,
      handler(newList) {
        uni.setStorageSync("shoppingCarList", newList);
      },
    },
  },
  computed: {
    totalMoney() {
      let total = 0;
      this.shoppingCarList.forEach((item) => {
        if (item.goods_selected) {
          total += item.goods_count * item.goods_price;
        }
      });
      return total;
    },
    totalAmount() {
      let total = 0;
      this.shoppingCarList.forEach((item) => {
        if (item.goods_selected) {
          total += item.goods_count;
        }
      });
      if (total === 0) {
        return false;
      } else {
        return total;
      }
    },
    isAll() {
      return this.shoppingCarList.every((item) => item.goods_selected);
    },
  },
  methods: {
    checkSimpleRadio(goods_id) {
      const index = this.shoppingCarList.findIndex(
        (item) => item.goods_id === goods_id
      );
      this.shoppingCarList[index].goods_selected = !this.shoppingCarList[index]
        .goods_selected;
    },
    checkAllRadio() {
      const isAll = this.isAll;
      this.shoppingCarList.forEach((item) => (item.goods_selected = !isAll));
    },
    addCount(goods_id) {
      const index = this.shoppingCarList.findIndex(
        (item) => item.goods_id === goods_id
      );
      this.shoppingCarList[index].goods_count++;
    },
    subCount(goods_id) {
      const index = this.shoppingCarList.findIndex(
        (item) => item.goods_id === goods_id
      );
      if (this.shoppingCarList[index].goods_count === 1) {
        uni.showModal({
          title: "是否删除此商品？",
          success: (res) => {
            if (res.confirm) {
              console.log("用户点击确定");
              this.shoppingCarList.splice(index, 1);
            }
          },
        });
      } else {
        this.shoppingCarList[index].goods_count--;
      }
    },
    slide(index1,index2){
      if(index2 === 0){
        uni.showToast({
          title: '暂未开发此功能',
          icon: 'none'
        });
      }
      if(index2 === 1){
        this.shoppingCarList.splice(index1,1)
        uni.showToast({
          title: '已删除该商品',
          icon: 'none'
        });
      }
    }
  },
};
</script>

<style lang="less">
.body {
  background-color: #f8f8f8;
  width: 100vw;
  min-height: 100vh;
  // padding: 0 20rpx;
  .goods_list {
    padding-bottom: 83rpx;
  }
  .GoodsListItem_left {
    padding: 20rpx;
    padding-left: 0;
  }
  .GoodsListItem_right {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    .btn_sub,
    .btn_add,
    .count {
      color: #999;
      font-size: 30rpx;
      padding: 0 12rpx;
    }
  }
  .acount {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 20rpx;
    height: 83rpx;
    background-color: #fdfdfd;
    display: flex;
    align-items: center;
    .radio_text {
      padding: 0 10rpx;
      font-size: 21rpx;
      color: #8a8a8a;
    }
    .total_text {
      padding: 0 10rpx;
      font-size: 26rpx;
      color: #292929;
    }
    .price {
      font-size: 28rpx;
    }
    .to_buy {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      .to_buy_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 52rpx;
        border-radius: 26rpx;
        font-size: 21rpx;
        color: #eee;
        padding: 0 26rpx;
        background-color: var(--main_color);
      }
    }
  }
  .goodslist_empty {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    .empty_image {
      width: 300rpx;
      height: 220rpx;
    }

    .empty_text {
      color: #bbb;
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }
    .btn {
      width: 150rpx;
      height: 50rpx;
      font-size: 28rpx;
      border-radius: 25rpx;
      background-color: var(--main_color);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>